dz
<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">门店信息</block>
		</cu-custom>
		<view v-if="md.stu == 'U'">
			<view class="cu-form-group">
				<view class="title">密钥</view>
				<input type="number" placeholder="请输入密钥" v-model="akey"></input>
			</view>
			<view class="padding ">
				<button @click="renling" class="cu-btn block bg-blue lg">提交</button>
			</view>
		</view>
		<view v-else-if="md.stu == 'C'">
			<view class="cu-form-group">
				<view class="title">营业执照：</view>
			</view>
			<yyzz-update v-model="md.yyzz" :idKey="md.storeid" />
			<button @click="shezhi" class="cu-btn block bg-blue lg">提交</button>
		</view>
		<view class="padding" v-else-if="md.stu == 'R'">
			<text>当前门店正在审核中...</text>
		</view>
		<form v-else-if="md.stu == 'T'">
			<view class=" bg-white padding">
				<view class="flex justify-between margin-bottom">
					<text>
						<text>基础信息</text>
						<text v-if="md.flg" class="text-blue">(已开店)</text>
						<text v-else class="text-red">(已闭店)</text>
					</text>
					<text class="text-xl">
						<text @tap="saveMd" class="cuIcon-edit text-blue">
							<text class="text-sm">保存</text>
						</text>


						<text v-if="md.flg" @tap="close" class="cuIcon-favor text-red">
							<text class="text-sm">闭店</text>
						</text>
						<text v-else @tap="open" class="cuIcon-favorfill text-blue">
							<text class="text-sm">开店</text>
						</text>
					</text>
				</view>
				<view class="bg-white">
					<view class="cu-form-group solid">
						<view class="title">门店名：</view>
						<input placeholder="请输入门店名" v-model="md.sname"></input>
					</view>
					<view></view>
					<view class="cu-form-group margin-top solid">
						<view class="title">位置：</view>
						<view>
							<text @click="sp = true;">
								<text class="" v-if="md.pcode">{{cmap[md.pcode].criname}}</text>
								<text class="" v-if="md.scode">{{cmap[md.scode].criname}}</text>
								<text class="" v-if="md.qcode">{{cmap[md.qcode].criname}}</text>
								<text v-else>请选择</text>
								<text class="cuIcon-right"></text>

							</text>
						</view>
					</view>
					<view></view>
					<view class="cu-form-group align-start margin-top solid">
						<view class="title">详细地址：</view>
						<textarea v-model="md.address" placeholder="请输入详细地址"></textarea>
					</view>
					<!-- 上传封面-->
					<view class="margin-top solid">
						<view class="cu-form-group">
							<view class="title">封面：</view>
						</view>
						<cover-update v-if="md.storeid != null" v-model="md.cover" :idKey="md.storeid" />
					</view>
					<!-- 上传图片相册 -->
					<view class="margin-top solid">
						<img-update v-if="md.storeid != null" :idKey="md.storeid" class="margin-top" v-model="md.imgs"
							:size="4" />
					</view>

					<!-- 设施服务 -->
					<view class="margin-top bg-white padding solid">
						<view><text>设施服务:</text></view>
						<view class="grid col-3">
							<view class="padding-top">
								<label class="flex align-stretch" @tap="md.gys = !md.gys">
									<text class="text-xl"><text class="text-blue"
											:class="md.gys ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"></text></text>
									<text>更衣室</text>
								</label>
							</view>
							<view class="padding-top">
								<label @tap="md.ly = !md.ly" class="flex align-stretch ">
									<text class="text-xl">
										<text class="text-blue"
											:class="md.ly ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"></text>
									</text>
									<text class="">淋浴室</text>
								</label>
							</view>
							<view class="padding-top">
								<label @tap="md.cs = !md.cs" class="flex align-stretch ">
									<text class="text-xl">
										<text class="text-blue"
											:class="md.cs ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"></text>
									</text>
									<text class="">卫生间</text>
								</label>
							</view>
							<view class="padding-top">
								<label @tap="md.kt = !md.kt" class="flex align-stretch ">
									<text class="text-xl">
										<text class="text-blue"
											:class="md.kt ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"></text>
									</text>
									<text class="">空调</text>
								</label>
							</view>
							<view class="padding-top">
								<label @tap="md.wifi = !md.wifi" class="flex align-stretch ">
									<text class="text-xl">
										<text class="text-blue"
											:class="md.wifi ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"></text>
									</text>
									<text class="">无线网</text>
								</label>
							</view>
							<view class="padding-top">
								<label @tap="md.yys = !md.yys" class="flex align-stretch ">
									<text class="text-xl">
										<text class="text-blue"
											:class="md.yys ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"></text>
									</text>
									<text class="">饮用水</text>
								</label>
							</view>
						</view>
					</view>


					<view class="cu-form-group solid margin-top">
						<view class="title">保洁周期：</view>
						<view class="flex justify-end align-center">
							<zqs-select :list="bjList" v-model="md.bj"></zqs-select>
							<text class="cuIcon-right"></text>
						</view>
					</view>
					<view class="cu-form-group solid margin-top">
						<view class="title">门店类型：</view>
						<view class="flex justify-end align-center">
							<zqs-select :list="mdtypes" v-model="md.storetype" labelKey="value"
								valueKey="code"></zqs-select>
						</view>
					</view>

					<view class="cu-form-group solid margin-top">
						<view class="title">楼层：</view>
						<view class="flex justify-end align-center">
							<zqs-select :list="floors" v-model="md.floor" labelKey="value" valueKey="code"></zqs-select>
						</view>
					</view>

					<view class="cu-form-group solid">
						<view class="title">面宽：</view>
						<input placeholder="请输入面宽" v-model="md.width"></input>
					</view>

					<view class="cu-form-group solid">
						<view class="title">进深：</view>
						<input placeholder="请输入进深" v-model="md.depth"></input>
					</view>

					<view class="cu-form-group solid">
						<view class="title">层高：</view>
						<input placeholder="请输入层高" v-model="md.height"></input>
					</view>

					<view class="cu-form-group solid">
						<view class="title">总面积：</view>
						<input placeholder="请输入层高" v-model="md.totalarea"></input>
					</view>
				</view>

			</view>



			<view class="margin-top bg-white padding">
				<view class="flex justify-between margin-bottom">
					<text>门禁信息</text>
					<view class="text-xxl">
						<text @tap="addmj" class="cuIcon-roundaddfill text-blue"></text>
					</view>
				</view>
				<view>
					<view class="margin-top" v-for="(mj,index) in mjs" :key="index">
						<view class="cu-card bg-white shadow">
							<view class="cu-form-group flex justify-between align-center">
								<view class="flex justify-end align-center">
									<view class="flex align-stretch">
										<text class="text-xl"><text
												:class="!mj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"
												class="text-blue"></text></text>
										<text>进门</text>
									</view>

									<!-- <view @tap="mjs[index].flg = !mjs[index].flg;" class="flex  justify-start align-stretch margin-left">
										<text class="text-xl"><text :class="mj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'" 
											class="text-blue"></text></text>
										<text>出门</text>
									</view> -->


								</view>

								<view class="text-xl">
									<config-mj v-if="mjs[index].config"
										@close="mjs[index].config = false; $forceUpdate();" :mj="mj"></config-mj>
									<text @tap="mjs[index].config = true; $forceUpdate();"
										class="cuIcon-settingsfill text-blue"></text>
									<text @tap="saveMj(mj, index)" class="cuIcon-edit text-blue margin-left"></text>
									<text @tap="rmmj(index)" class="cuIcon-deletefill text-red margin-left"></text>
								</view>

							</view>
							<view class="cu-form-group">
								<view class="title">型号：</view>
								<input class="solid" type="number" placeholder="请输入型号" v-model="mj.modelnumber"></input>
							</view>
							<view class="cu-form-group">
								<view class="title">序列号：</view>
								<input class="solid" type="number" placeholder="请输入序列号" v-model="mj.sn"></input>
							</view>
						</view>
					</view>
				</view>
			</view>



			<!-- 新增房间 -->
			<view class="margin-top bg-white padding">
				<view class="flex justify-between margin-bottom">
					<text @tap="loadStore">房间信息</text>
					<view class="text-xxl">
						<text @tap="toNewRoom" class="cuIcon-roundaddfill text-blue"></text>
					</view>
				</view>
				<!-- 房间列表循环 -->


				<!-- 列表卡片区 -->
				<view class="padding-sm" v-for="(room,index) in roomList" :key="index">
					<view class="bg-white shadow radius">
						<room-item :path="'/pages/cdz/fj'" :room="room" :showE="true"></room-item>
					</view>
				</view>
			</view>

		</form>
		<view v-else-if="md.stu == 'J'">
			<text class="padding-xs">当前资料已驳回，请重新上传。</text>
			<view class="cu-form-group">
				<view class="title">房屋使用证明：</view>
			</view>
			<yyzz-update v-model="md.yyzz" :idKey="md.storeid" />
			<button @click="shezhi" class="cu-btn block bg-blue lg">提交</button>
		</view>
		<md-position v-if="sp" @change="adChange" @close="sp = false" :astore="md" />
	</view>
</template>

<script>
	import mdposition from "@/components/md-position.vue";
	export default {
		components: {
			"md-position": mdposition
		},
		data: function() {
			return {
				sp: false,
				akey: "",
				md: {
					storeid: "", //门店id
					sname: "", //门店名
					jd: "", //经度
					wd: "", //纬度
					imgs: [],
					akey: "",
					cover: "", //封面
					dzid: "", //店长id
					address: "",
					ly: false, //淋浴间
					kt: false, //空调
					gys: false, //更衣室
					cs: false, //卫生间
					wifi: false, //
					yys: false, //饮用水
					bj: "", //保洁
					storetype: "",
					floor: 1,
					width: 0,
					depth: 0,
					height: 0,
					totalarea: 0,
				},
				cmap: this.location.localmap.cmap,
				bjIndex: 0,
				bjList: [],
				floors: [],
				roomList: [],
				mjs: []
			};
		},
		created: function() {
			this.constant.get("MDTYPE").then(data => {
				this.mdtypes = data.dicts;
			});
			this.constant.get("FLONUM").then(data => {
				this.floors = data.dicts;
			});
			this.constant.get("BJTP").then(data => {
				this.bjList = data.dicts;
			});
		},
		onLoad: function(option) {
			this.md.storeid = option.storeid;
		},

		onShow: function() {
			this.loadStore();
		},

		methods: {
			loadStore: function() {
				this.api("/md/info/get").send({
					storeid: this.md.storeid
				}).then(data => {
					this.md = data.astore;
					this.roomList = data.rooms;
					this.mjs = data.menjins;
				});
			},

			checkMjflg: function(mj) {
				mj.flg = !mj.flg;
			},

			toNewRoom: function() {
				uni.navigateTo({
					url: "/pages/cdz/fj/new?storeid=" + this.md.storeid
				});

			},
			saveMd: function() {
				this.api("/md/info/put").send(this.md).then(data => {
					this.message.info("修改成功");
				});
			},
			addmj: function() {
				this.mjs.push({
					mjid: "",
					flg: false,
					modelmumber: "F014",
					uid: "",
					ukey: "",
					sn: "",
					statu: true,
					dflg: false,
					storeid: this.md.storeid,
				});
			},
			rmmj: function(index) {
				if (this.mjs[index].mjid) {
					this.api("/mj/info/del").send({
						mjid: this.mjs[index].mjid
					}).then(data => {
						this.message.info("删除成功");
						this.mjs.splice(index, 1);
					});
				} else {
					this.mjs.splice(index, 1);
				}
			},
			openConfig: function(mj, index) {
				mj.config = true;
				this.$forceUpdate();

			},
			saveMj: function(mj, index) {
				if (mj.mjid) {
					this.api("/mj/info/put").send(mj).then(data => {
						this.message.info("修改门禁成功");
					});
				} else {
					this.api("/mj/info").send(mj).then(data => {
						this.mjs[index] = data.amenjin;
						this.message.info("新增门禁成功");
					});
				}
			},

			// 查看详情（示例）
			toDetailRoom: function(id) {
				uni.navigateTo({
					url: `/pages/cdz/fj/edit?id=${id}`
				});
			},

			renling: function() {
				if (!this.akey) {
					this.message.error("请输入认领密钥");
					return;
				}

				if (this.akey != this.md.akey) {
					this.message.error("请输密钥不正确");
					return;
				}

				this.md.stu = "C";

				this.api("/md/info/put").send(this.md).then(data => {
					this.message.info("认领成功");
				});
			},

			shezhi: function() {
				if (!this.md.yyzz) {
					this.message.error("请上传场地使用证明");
					return;
				}

				this.md.stu = "R";
				this.api("/md/info/put").send(this.md).then(data => {
					this.message.info("设置成功");
				});
			},

			open: function() {
				if (!this.md.sname) {
					this.message.info("请设置门店名");
					return;
				}

				if (!this.md.pcode) {
					this.message.info("请选择门店位置");
					return;
				}

				if (!this.md.cover) {
					this.message.info("封面必须设置");
					return;
				}

				if (this.md.imgs.length == 0) {
					this.message.info("请至少上传一张门店图片");
					return;
				}

				if (this.mjs.length < 1) {
					this.message.info("请至少添加一个门禁");
					return;
				}

				if (this.roomList.length == 0) {
					this.message.info("请至少添加一个房间");
					return;
				}

				this.api("/md/open").send({
					mdid: this.md.storeid
				}).then(data => {
					this.md.flg = true;
					this.message.info("开店成功");
				});
			},

			close: function() {
				this.api("/md/close").send({
					mdid: this.md.storeid
				}).then(data => {
					this.md.flg = false;
					this.message.info("闭店成功");
				});
			},

			adChange: function(md) {

				this.md.pcode = md.pcode;
				this.md.scode = md.scode;
				this.md.qcode = md.qcode;
				this.md.address = md.address;
				this.md.jd = md.jd;
				this.md.wd = md.wd;
				this.sp = false;
			}

		}
	}
</script>

<style scoped>
	.roomtitle {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: start;
		min-height: 100rpx;
		justify-content: space-between;
		flex-direction: column;
	}

	.roomtitle text {
		padding: 0.3rem;
	}
</style>